<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务调度中心</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .btn-danger {
            background-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
        .btn-success {
            background-color: #28a745;
        }
        .btn-success:hover {
            background-color: #218838;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        .status-running {
            color: #28a745;
            font-weight: bold;
        }
        .status-stopped {
            color: #dc3545;
            font-weight: bold;
        }
        .pagination {
            margin-top: 20px;
            text-align: center;
        }
        .pagination button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>任务调度中心</h1>
        
        <!-- 创建任务 -->
        <div class="section">
            <h2>创建任务</h2>
            <form id="createJobForm">
                <div class="form-group">
                    <label for="jobName">任务名称:</label>
                    <input type="text" id="jobName" name="jobName" required>
                </div>
                <div class="form-group">
                    <label for="jobDesc">任务描述:</label>
                    <textarea id="jobDesc" name="jobDesc" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="cronExpression">CRON表达式:</label>
                    <input type="text" id="cronExpression" name="cronExpression" placeholder="0 0/1 * * * ?">
                </div>
                <div class="form-group">
                    <label for="scheduleType">调度类型:</label>
                    <select id="scheduleType" name="scheduleType">
                        <option value="CRON">CRON表达式</option>
                        <option value="FIX_RATE">固定频率</option>
                        <option value="FIX_DELAY">固定延迟</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="jobParams">任务参数:</label>
                    <textarea id="jobParams" name="jobParams" rows="2"></textarea>
                </div>
                <button type="submit">创建任务</button>
            </form>
        </div>
        
        <!-- 任务列表 -->
        <div class="section">
            <h2>任务列表</h2>
            <button onclick="loadJobList()">刷新列表</button>
            <table id="jobTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>任务名称</th>
                        <th>任务描述</th>
                        <th>CRON表达式</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="jobTableBody">
                </tbody>
            </table>
            <div class="pagination" id="pagination">
            </div>
        </div>
    </div>

    <script>
        let currentPage = 1;
        let totalPages = 1;
        
        // 创建任务
        document.getElementById('createJobForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const jobData = {
                jobName: formData.get('jobName'),
                jobDesc: formData.get('jobDesc'),
                cronExpression: formData.get('cronExpression'),
                scheduleType: formData.get('scheduleType'),
                jobParams: formData.get('jobParams'),
                jobGroupPO: 1
            };
            
            fetch('/job-scheduler/api/job/create', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(jobData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('任务创建成功！');
                    e.target.reset();
                    loadJobList();
                } else {
                    alert('任务创建失败：' + data.messageDTO);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('创建任务时发生错误');
            });
        });
        
        // 加载任务列表
        function loadJobList(page = 1) {
            currentPage = page;
            fetch(`/job-scheduler/api/job/list?page=${page}&size=10`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    displayJobList(data.data.records);
                    displayPagination(data.data);
                } else {
                    alert('加载任务列表失败：' + data.messageDTO);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('加载任务列表时发生错误');
            });
        }
        
        // 显示任务列表
        function displayJobList(jobs) {
            const tbody = document.getElementById('jobTableBody');
            tbody.innerHTML = '';
            
            jobs.forEach(job => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${job.id}</td>
                    <td>${job.jobName}</td>
                    <td>${job.jobDesc || '-'}</td>
                    <td>${job.cronExpression || '-'}</td>
                    <td class="${job.status === 1 ? 'status-running' : 'status-stopped'}">
                        ${job.status === 1 ? '运行中' : '已停止'}
                    </td>
                    <td>
                        ${job.status === 0 ? 
                            `<button class="btn-success" onclick="startJob(${job.id})">启动</button>` :
                            `<button class="btn-danger" onclick="stopJob(${job.id})">停止</button>`
                        }
                        <button class="btn-danger" onclick="deleteJob(${job.id})">删除</button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }
        
        // 显示分页
        function displayPagination(pageData) {
            const pagination = document.getElementById('pagination');
            totalPages = pageData.pages;
            
            let paginationHtml = '';
            if (currentPage > 1) {
                paginationHtml += `<button onclick="loadJobList(${currentPage - 1})">上一页</button>`;
            }
            paginationHtml += `<span>第 ${currentPage} 页，共 ${totalPages} 页</span>`;
            if (currentPage < totalPages) {
                paginationHtml += `<button onclick="loadJobList(${currentPage + 1})">下一页</button>`;
            }
            
            pagination.innerHTML = paginationHtml;
        }
        
        // 启动任务
        function startJob(id) {
            fetch(`/job-scheduler/api/job/start/${id}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('任务启动成功！');
                    loadJobList(currentPage);
                } else {
                    alert('任务启动失败：' + data.messageDTO);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('启动任务时发生错误');
            });
        }
        
        // 停止任务
        function stopJob(id) {
            fetch(`/job-scheduler/api/job/stop/${id}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert('任务停止成功！');
                    loadJobList(currentPage);
                } else {
                    alert('任务停止失败：' + data.messageDTO);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('停止任务时发生错误');
            });
        }
        
        // 删除任务
        function deleteJob(id) {
            if (confirm('确定要删除这个任务吗？')) {
                fetch(`/job-scheduler/api/job/delete/${id}`, {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        alert('任务删除成功！');
                        loadJobList(currentPage);
                    } else {
                        alert('任务删除失败：' + data.messageDTO);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除任务时发生错误');
                });
            }
        }
        
        // 页面加载时加载任务列表
        window.onload = function() {
            loadJobList();
        };
    </script>
</body>
</html> 